In this tutorial, we will learn how to scroll to the bottom of a page onclick button using Vue.js. We will use the window.scrollTo() method to implement this functionality.
How to Use Vue JS to Scroll to the Bottom of a Page ?
This code below demonstrates how to scroll to the bottom of the page. In this example, we use the Options API. See this example, and if you want to edit this code, use the TryIt editor to make changes.
Vue Js Scroll Bottom of Page
<script type="module">
import {createApp} from "vue";
createApp({
data() {
return {
bottom: ''
}
},
methods: {
scrollBottom() {
this.bottom = document.body.scrollHeight;
window.scrollTo({
top: this.bottom,
behavior: 'smooth'
});
}
}
}).mount("#app");
</script>
Output of Vue Scroll to Bottom of Page
Using a Ref with Vue 3 Composition API
<script type="module">
const {createApp} = Vue;
createApp({
setup() {
const scrollToBottom = () => {
window.scrollTo({
top: document.body.scrollHeight,
behavior: 'smooth'
});
};
return {
scrollToBottom
};
}
}).mount("#app");
</script>
